﻿@page "/scrollablecontent"

<h1>Scrollable Content</h1>

<hr class="mb-5" />

<p>
    By default, a modals content will not scroll if the contents height is greater than the viewports height.<br />
    By setting <code>ContentScrollable</code> to <code>true</code> the Modal will include scroll bars allowing a user to scroll all the content.
</p>

<div class="card mb-4">
    <h5 class="card-header">Setting on a per modal basis</h5>
    <div class="card-body">
        <p class="card-text">
            <code>
                @("var options = new ModalOptions() { ContentScrollable = true };")
            </code>
        </p>
    </div>
</div>

<div class="card mb-4">
    <h5 class="card-header">Setting globally for all modals</h5>
    <div class="card-body">
        <p class="card-text">
            <code>
                @("<BlazoredModal ContentScrollable=\"true\" />")
            </code>
        </p>
    </div>
</div>

<button @onclick="ContentScrollableEnabled" class="btn btn-primary">ContentScrollable Enabled</button>
<button @onclick="ContentScrollableDefault" class="btn btn-secondary">ContentScrollable Default</button>

@code {

    [CascadingParameter] public IModalService Modal { get; set; }

    void ContentScrollableEnabled()
    {
        var options = new ModalOptions { ContentScrollable = true };

        Modal.Show<FullContentPage>("Content Scrollable", options);
    }

    void ContentScrollableDefault()
    {
        Modal.Show<FullContentPage>("Default Setting");
    }
}